
<template>
  <view class="info_box">
    <view class="info-linear"></view>
    <view class="all_box">
      <view class="poi-name-box">
        <text v-if="poiDetail" class="poi_name">{{ poiDetail.poiTitle }}</text>
        <text class="poi-level" v-if="poiDetail.level">{{poiDetail.level}}</text>
        <text class="poi-score" v-if="poiDetail.hotness">
          <text class="poi-score-icon"></text>
          <!-- <image
            class="poi-score-icon"
            src="https://cdn1.visiotrip.com/h5AndMini/2024-09-04/poi-score-icon.png"
            mode="scaleToFill"
          /> -->
          <text>{{poiDetail.hotness}}</text>
        </text>
      </view>
      <view class="poi-name-bottom">
        <view class="top-view" v-if="poiDetail.topTips" @click="toAiPlay">
          <image
            class="top-icon"
            src="https://cdn1.visiotrip.com/h5AndMini/2024-06-24/home-top-cion.png"
            mode="scaleToFill"
          />
          <text class="top-text omit1">{{poiDetail.topTips}}</text>
          <image
            class="right-icon"
            src="https://cdn1.visiotrip.com/h5AndMini/2024-06-24/home-top-right-cion.png"
            mode="scaleToFill"
          />
        </view>
        <view
          class="grade_box"
          v-if="poiDetail.tags && poiDetail.tags.length > 0"
        >
          <view
            class="tagItem"
            v-for="(item, index) in poiDetail.tags"
            :key="index"
          >
            {{ item }}
          </view>
        </view>
      </view>
      <!-- <view class="grade_box">
                <view class="grade_1" v-if="poiDetail.level">{{ poiDetail.level }}景区</view>
                <view class="grade_2" v-if="poiDetail.telephone">{{ poiDetail.telephone }}</view>
            </view> -->
      <block v-if="false">
        <view
          class="info_flex-left"
          v-if="poiDetail.businessHours"
          @click="poiInfo"
        >
          <view class="flex_left omit1">{{ poiDetail.businessHours }}</view>
          <view class="flex_right">
            <view class="right_info">简介</view>
            <!-- <uni-icons
              type="forward"
              color="$sl-color-grey"
              size="14"
            ></uni-icons> -->
            <image src="https://cdn1.visiotrip.com/h5AndMini/2024-06-24/tour-right-icon.png" class="icon" />
          </view>
        </view>
        <view
          class="info_flex"
          v-if="poiDetail.addressTag.name"
          @click="viewMap(poiDetail)"
        >
          <view class="flex_left">{{ poiDetail.addressTag.name }}</view>
          <view class="flex_right">
            <image src="https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-right.png" class="icon" />
            <!-- <uni-icons
              type="forward"
              color="$sl-color-grey"
              size="14"
            ></uni-icons> -->
            <!-- <image class="map-icon" src="https://cdn1.visiotrip.com/h5AndMini/2023-3-29/poi-map-icon.png"></image>
                        <view class="right_info_2">地图</view> -->
          </view>
        </view>
      </block>
      <view class="info-flex-box">
        <view
          class="info_flex-left"
          :data-spmCntSuffix="'.poiInfo@'"
          :data-custom="1"
          :data-spm="{'pos': '简介'}"
          @click="poiInfo"
        >
          <view class="flex_left omit1" v-if="poiDetail.businessHours">
            <text style="color: #78BD00;margin-right: 12rpx" :style="!poiDetail.isOpen ? 'color: #F93F55' : ''">{{ poiDetail.isOpen ? '开放中' : '今日已闭园' }}</text>
            <text v-if="poiDetail.isOpen">{{ poiDetail.businessHours }}</text>
          </view>
          <view class="flex_left omit1" v-else>
            <rich-text :nodes="poiDetail.introduction"></rich-text>
          </view>
          <view class="flex_right"> 
            <view class="right_info">简介</view>
            <!-- <uni-icons type="forward" color="#767697" size="12"></uni-icons> -->
            <image src="https://cdn1.visiotrip.com/h5AndMini/2024-06-24/tour-right-icon.png" class="icon" />
          </view>
        </view>
        <view
          class="info_flex info_flex-address"
          v-if="poiDetail.addressTag.name"
          :data-spmCntSuffix="'.viewMap@'"
          :data-custom="1"
          :data-spm="poiDetail"
          @click="viewMap(poiDetail)"
        >
          <view class="flex_left omit2">{{ poiDetail.addressTag.name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    poiDetail: {
      type: Object,
    },
    poiId: {
      type: [String, Number],
    },
  },
  components: {},
  computed: {},
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    viewMap(item) {
      let latitude = item.addressTag.latitude;
      let longitude = item.addressTag.longitude;
      let title = item.addressTag.name;
      let data = {
        latitude: Number(latitude),
        longitude: Number(longitude),
        name: title,
        success: function () {},
      };
      this.$openLocation(data);
    },
    poiInfo() {
      const url = "/packageA/pages/introduce/introduce";
      this.$navTo(
        url,
        {
          stdId: "",
          poiId: uni.getStorageSync("poiId"),
        },
        "navigateTo"
      );
    },
    // 跳转到玩什么榜单
    toAiPlay(item) {
      this.$navTo(
        '/packageAI/pages/aiPlay/aiPlay',
        {poiId: this.poiId},
        'navigateTo'
      )
    },
  },
};
</script>

<style lang="scss" scoped>
.info_box {
  width: 100%;
  border-radius: 48rpx 48rpx 0 0;
  background: #F6F6F9;
  position: relative;
  margin-top: -48rpx;
  margin-bottom: 10rpx;
  .info-linear {
    position: absolute;
    width: 750rpx;
    height: 320rpx;
    background: linear-gradient( 180deg, #FFFFFF 0%, rgba(253,254,255,0) 100%);
    border-radius: 48rpx 48rpx 0rpx 0rpx;
    z-index: -1;
  }

  .all_box {
    padding: 0 28rpx;
    border-radius: 48rpx 48rpx 0 0;
    background: linear-gradient( 180deg, #FFFFFF 0%, rgba(253,254,255,0) 100%);
    .poi-name-box {
      display: block;
      // display: flex;
      // align-items: center;
      padding: 32rpx 0 12rpx 0;
      .poi_name {
        font-size: 42rpx;
        color: $sl-color-black;
        font-weight: 600;
        line-height: 61rpx;
        flex: 1;
      }
      .poi-level {
        font-weight: 600;
        font-size: 24rpx;
        color: $sl-color-grey;
        line-height: 34rpx;
        background: rgba(229,235,255,0.5);
        border-radius: 4rpx;
        padding: 3rpx 14rpx;
        margin-left: 12rpx;
      }
      .poi-score {
        // display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 34rpx;
        background: linear-gradient( 130deg, #FF859D 0%, #F93F55 100%);
        border-radius: 4rpx;
        padding: 3rpx 10rpx;
        margin-left: 12rpx;
        .poi-score-icon {
          width: 22rpx;
          height: 27rpx;
          margin-right: 8rpx;
          background: url('https://cdn1.visiotrip.com/h5AndMini/2024-09-04/poi-score-icon.png');
          background-size: cover;
          display: inline-block;
        }
      }
    }
    .poi-name-bottom {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      .top-view {
        display: flex;
        align-items: center;
        height: 40rpx;
        background: linear-gradient( 223deg, rgba(254, 238, 223, 0.5) 0%, rgba(247, 213, 185, 0.5) 100%);
        border-radius: 20rpx;
        padding: 0 10rpx;
        .top-icon {
          width: 24rpx;
          height: 24rpx;
        }
        .top-text {
          font-weight: 600;
          font-size: 24rpx;
          color: #803309;
          line-height: 24rpx;
          margin-left: 2rpx;
        }
        .right-icon {
          width: 24rpx;
          height: 24rpx;
          margin-left: 12rpx;
        }
      }
      .grade_box {
        display: flex;
        align-content: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        .tagItem {
          font-size: 24rpx;
          color: #F18C34;
          padding: 0 14rpx;
          height: 40rpx;
          line-height: 40rpx;
          border-radius: 4rpx;
          margin-left: 12rpx;
          background: #FFFBF4;
        }
        .grade_1 {
          background: #0075da;
          padding: 0 10rpx;
          line-height: 39rpx;
          color: #ffffff;
          font-size: 24rpx;
        }

        .grade_2 {
          background: #e7f3ff;
          padding: 0 10rpx;
          line-height: 39rpx;
          color: #13a1eb;
          font-size: 24rpx;
        }
      }
    }

    .info-flex-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .info_flex-left {
        width: 262rpx;
        height: 104rpx;
        background: #ffffff;
        border-radius: 26rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 22rpx;
        .flex_left {
          height: 34rpx;
          color: #131328;
          font-size: 24rpx;
          font-weight: 600;
          line-height: 34rpx;
        }
        .flex_right {
          display: flex;
          align-items: center;
          color: #131328;
          font-weight: 600;
          font-size: 24rpx;
          .icon {
            width: 24rpx;
            height: 24rpx;
          }
        }
      }
      .info_flex-address {
        width: 418rpx;
        height: 104rpx;
        background-size: 418rpx 104rpx;
        border-radius: 26rpx;
        padding: 0 0 0 26rpx;
        background-image: url('https://cdn1.visiotrip.com/h5AndMini/2024-06-24/poi-address.png');

        .flex_left{
            color: #131328;
            font-weight: 600;
            font-size: 24rpx;
            width: 268rpx;
        }
      }
    }
    .info_flex {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      padding: 15rpx 0;

      .flex_left {
        word-break: break-all;
        // flex-grow: 1;
        color: $sl-color-grey;
        font-size: 24rpx;
      }

      .flex_right {
        // width: 120rpx;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: -3rpx;

        .right_info {
          color: #131328;
          font-size: 24rpx;
        }

        .right_info_2 {
          color: $sl-color-grey;
          font-size: 24rpx;
        }

        .map-icon {
          width: 30rpx;
          height: 33rpx;
          margin-right: 4rpx;
        }
      }
    }
  }
}
</style>
